<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <ul>
    <li>第一个li元素</li>
    <li>第二个li元素</li>
  </ul>
  <button>appendChild()方法</button>
  <button>insertBefore()方法</button>
  <script>
    var ul = document.querySelector('ul');
    var btn = document.querySelectorAll('button');
    btn[0].onclick = function () {
      var div = document.createElement('div');
      div.innerHTML = '通过appendChild()方法新添加的节点';
      ul.appendChild(div);
    };
    btn[1].onclick = function () {
      var div = document.createElement('div');
      div.innerHTML = '通过insertBefore()方法新添加的节点';
      ul.insertBefore(div, ul.children[1]);
    };
  </script>
</body>
</html>